<template>
  <div class="home">
    <v-header></v-header>
    <section :class="step === 2 ? 'step2-register' : 'register'">
      <div class="inner">
        <h1 class="title">新用户注册</h1>
        <div class="steps">
          <li class="step" v-for="(item, index) in steps" :key="index">
            <img class="bg" :src="item['step' + step]" alt srcset />
            <span class="step-text" :class="[step > index ? 'active' : '']">{{ item.text }}</span>
          </li>
        </div>
        <p v-if="step < 3" class="attention">
          （带
          <i class="must">*</i>号的为必填项）
        </p>
        <section class="re-form" :class="[step === 1 ? 'active' : '']">
          <el-form ref="step1form" label-position="left" size="small" class="form" :model="step1Form" :rules="step1Rules" label-width="100px">
            <el-form-item label="用户名：" prop="CLT_CODE">
              <el-input maxlength="20" placeholder="请输入用户名" v-model="step1Form.CLT_CODE"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="CLT_PHONE">
              <el-input maxlength="11" placeholder="请输入手机号" v-model="step1Form.CLT_PHONE"></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="CLT_PHONE_VALIDATE">
              <el-input maxlength="6" placeholder="请输入验证码" v-model="step1Form.CLT_PHONE_VALIDATE">
                <el-button style="width: 120px" @click="getVerifyCode" v-if="showGetVerifyCode" type="primary" slot="append">获取验证码</el-button>
                <el-button style="width: 120px" v-else disabled type="primary" slot="append">获取验证码({{ resetVerifyCodeTime }})</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱地址：" prop="CLT_EMAIL">
              <el-input maxlength="255" placeholder="请输入邮箱地址" v-model="step1Form.CLT_EMAIL"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="CLT_PASSWORD" style="position: relative">
              <el-tag v-show="bigChar" class="elTag">大写锁定已打开</el-tag>
              <el-input
                @keyup.native="loginKeyDown"
                maxlength="16"
                autocomplete="new-password"
                type="password"
                placeholder="请输入密码"
                v-model="step1Form.CLT_PASSWORD"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="CLT_PASSWORD_TWICE">
              <el-input
                @keyup.native="loginKeyDown1"
                maxlength="16"
                autocomplete="new-password"
                type="password"
                placeholder="请输入确认密码"
                v-model="step1Form.CLT_PASSWORD_TWICE"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="isAgree" size="small" label="我已阅读并同意《服务平台注册协议》"></el-checkbox>
            </el-form-item>
          </el-form>
          <el-button :disabled="!isAgree" @click="nextStep(2)" class="btn" size="small" type="primary">下一步</el-button>
        </section>
        <section class="re-form" :class="[step === 2 ? 'active' : '']">
          <el-form ref="step2form" label-position="left" size="small" class="form" :model="step2Form" :rules="step2Rules" label-width="150px">
            <!-- <el-form-item label="选择区域：" prop="CLT_AREA"> -->
            <!-- <el-popover popper-class="my-popover" width="336" trigger="click">
               <el-tree highlight-current :expand-on-click-node="false" :data="area" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
               <el-input clearable slot="reference" v-model="step2Form.CLT_AREA" placeholder="请选择区域"></el-input>
            </el-popover>-->
            <!-- <el-select  v-model="step2Form.CLT_AREA"  style="width: 100%">
              <el-option
                v-for="(item,index) in area"
                :key="index"
                :label="item.DPT_NAME"
                :value="item.DPT_ID">
              </el-option>
            </el-select>-->
            <!-- </el-form-item> -->
            <el-form-item label="企业名称：" prop="CLT_COMPANY_FULLNAME">
              <el-input maxlength="50" placeholder="请输入企业名称" v-model="step2Form.CLT_COMPANY_FULLNAME"></el-input>
              <span class="msg">需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后，企业名称不可修改。</span>
            </el-form-item>
            <el-form-item label="企业地址：" prop="CLT_COMPANY_ADDRESS">
              <el-input maxlength="255" placeholder="请输入企业地址" v-model="step2Form.CLT_COMPANY_ADDRESS"></el-input>
            </el-form-item>
            <el-form-item label="企业电话：" prop="CLT_COMPANY_PHONE">
              <el-input placeholder="请输入企业电话" v-model="step2Form.CLT_COMPANY_PHONE"></el-input>
            </el-form-item>
            <el-form-item label="企业简称代码：" prop="CLT_COMPANY_CODE">
              <el-input maxlength="10" placeholder="请输入企业简称代码" v-model="step2Form.CLT_COMPANY_CODE"></el-input>
            </el-form-item>
            <el-form-item label="法人身份证姓名：" prop="CLT_COMPANY_LEGAL_PERSON_NAME">
              <el-input maxlength="20" placeholder="请输入法人身份证姓名" v-model="step2Form.CLT_COMPANY_LEGAL_PERSON_NAME"></el-input>
            </el-form-item>
            <el-form-item label="法人身份证号：" prop="CLT_COMPANY_LEGAL_PERSON_ID">
              <el-input maxlength="18" placeholder="请输入法人身份证号" v-model="step2Form.CLT_COMPANY_LEGAL_PERSON_ID"></el-input>
            </el-form-item>
            <!-- <el-form-item label="法人联系电话：" prop="CLT_COMPANY_LEGAL_PERSON_PHONE">
            <el-input maxlength="20" placeholder="请输入法人联系电话" v-model="step2Form.CLT_COMPANY_LEGAL_PERSON_PHONE"></el-input>
            </el-form-item>-->
            <el-form-item label="统一社会信用代码：" prop="CLT_COMPANY_REGISTER_CODE">
              <el-input maxlength="18" placeholder="请输入统一社会信用代码" v-model="step2Form.CLT_COMPANY_REGISTER_CODE"></el-input>
              <span class="msg">请输入18位的统一社会信用代码</span>
            </el-form-item>
            <el-form-item label="联系人：" prop="fltContact">
              <el-input maxlength="19" placeholder="请输入联系人" v-model="step2Form.fltContact"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话：" prop="fltContactPhone">
              <el-input placeholder="请输入联系人电话" v-model="step2Form.fltContactPhone"></el-input>
            </el-form-item>
            <el-form-item label="开户行：" prop="fltBank">
              <el-input maxlength="19" placeholder="请输入开户行" v-model="step2Form.fltBank"></el-input>
            </el-form-item>
            <el-form-item label="银行账户：" prop="fltAccount">
              <el-input maxlength="25" placeholder="请输入银行账户" v-model="step2Form.fltAccount"></el-input>
            </el-form-item>
            <el-form-item label="开户行代码：" prop="fltBankCode">
              <el-input maxLength="20" placeholder="请输入银行代码" v-model="step2Form.fltBankCode"></el-input>
            </el-form-item>
            <el-form-item label="支行名称：" prop="fltBranchName">
              <el-input maxLength="20" placeholder="请输入支行名称" v-model="step2Form.fltBranchName"></el-input>
            </el-form-item>
            <el-form-item label="支行代码：" prop="fltBranchCode">
              <el-input maxLength="20" placeholder="请输入支行代码" v-model="step2Form.fltBranchCode"></el-input>
            </el-form-item>
          </el-form>
          <div class="upload-area">
            <div class="step2-upload">
              <el-upload
                action
                :data="{ step: 'one' }"
                :http-request="uploadImage"
                :before-upload="beforeUpload"
                :show-file-list="false"
                class="avatar-uploader"
              >
                <img v-if="imageUrl.one" :src="imgUrl.one" class="avatar" />
                <i v-else class="el-icon-plus uploader-icon"></i>
              </el-upload>
            </div>
            <p class="upload-desc">营业执照</p>
            <p class="upload-desc">建议大小在5M以内</p>
            <div class="step2-upload">
              <el-upload
                action
                :data="{ step: 'two' }"
                :http-request="uploadImage"
                :before-upload="beforeUpload"
                :show-file-list="false"
                class="avatar-uploader"
              >
                <img v-if="imageUrl.two" :src="imgUrl.two" class="avatar" />
                <i v-else class="el-icon-plus uploader-icon"></i>
              </el-upload>
            </div>
            <p class="upload-desc">法人身份证正面</p>
            <p class="upload-desc">建议大小在5M以内</p>
            <div class="step2-upload">
              <el-upload
                action
                :show-file-list="false"
                :data="{ step: 'three' }"
                :http-request="uploadImage"
                :before-upload="beforeUpload"
                class="avatar-uploader"
              >
                <img v-if="imageUrl.three" :src="imgUrl.three" class="avatar" />
                <i v-else class="el-icon-plus uploader-icon"></i>
              </el-upload>
            </div>
            <p class="upload-desc">法人身份证反面</p>
            <p class="upload-desc">建议大小在5M以内</p>
          </div>
          <div class="box">
            <div class="left">
              <el-button @click="nextStepA" class="btn" size="small" type="primary">上一步</el-button>
            </div>
            <div class="right">
              <el-button @click="nextStep(3)" class="btn" size="small" type="primary">下一步</el-button>
            </div>
          </div>
        </section>
        <section class="re-form" :class="[step === 3 ? 'active' : '']">
          <div class="success">
            <img class="success-icon" src="@/assets/images/register/success.jpg" alt srcset />
            <p class="success-text">等待管理员审核</p>
            <p class="success-timer">倒数{{ seconds }}秒后，将自动跳转至登录界面......</p>
            <el-button @click="$router.push('/login')">返回登录</el-button>
          </div>
        </section>
      </div>
    </section>
    <v-footer class="footer"></v-footer>
  </div>
</template>

<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
import { UploadFile, Register, ValidNameAndPhone, GetDepartment, InsertCode } from '../../../request/api'
export default {
  name: 'register',
  components: {
    VHeader,
    VFooter,
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'Name',
      },
      area: [],
      firstTochar: false,
      bigChar: false,
      resetVerifyCodeTime: 0, // 刷新验证码的倒计时
      showGetVerifyCode: true, // 是否可以获取验证码
      isAgree: false, // 是否同意协议
      timer: null, // 注册成功的计时器
      seconds: 5, // 倒计时
      step: 1, // 当前步骤
      steps: [
        {
          text: '第一步：基本信息',
          step1: require('@/assets/images/register/register-01.jpg'),
          step2: require('@/assets/images/register/register-01.jpg'),
          step3: require('@/assets/images/register/register-01.jpg'),
        },
        {
          text: '第二步：信息登记',
          step1: require('@/assets/images/register/register-02.jpg'),
          step2: require('@/assets/images/register/register-04.jpg'),
          step3: require('@/assets/images/register/register-04.jpg'),
        },
        {
          text: '第三步：完成注册',
          step1: require('@/assets/images/register/register-03.jpg'),
          step2: require('@/assets/images/register/register-03.jpg'),
          step3: require('@/assets/images/register/register-05.jpg'),
        },
      ],
      step1Form: {
        CLT_CODE: '', // 用户名
        CLT_PHONE: '', // 手机号码
        CLT_PHONE_VALIDATE: '', // 验证码
        CLT_EMAIL: '', // 邮箱地址
        CLT_PASSWORD: '', // 密码
        CLT_PASSWORD_TWICE: '', // 确认密码
      },
      step1Rules: {
        CLT_CODE: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // {
          //   validator: (rule, value, callback) => {
          //     if (/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) {
          //       callback()
          //     } else {
          //       callback(new Error('只允许输入数字、字母、中文'))
          //     }
          //   },
          //   trigger: 'blur'
          // }
        ],
        CLT_PHONE: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              if (/^\d{11}$/.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号'))
              }
            },
            trigger: 'blur',
          },
        ],
        CLT_PHONE_VALIDATE: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^\d{6}$/.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的验证码'))
              }
            },
            trigger: 'blur',
          },
        ],
        CLT_EMAIL: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的邮箱地址'))
              }
            },
            trigger: 'blur',
          },
        ],
        CLT_PASSWORD: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '您的密码输入长度不足，请重新输入',
            trigger: 'blur',
          },
          {
            validator: function (rule, value, callback) {
              if (/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,16}$/.test(value) == false) {
                callback(new Error('密码必须包含字母、数字'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        CLT_PASSWORD_TWICE: [
          { required: true, message: '请输入您的确认密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '您的密码输入长度不足，请重新输入',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (value != this.step1Form.CLT_PASSWORD) {
                callback(new Error('2次密码输入不一致，请重新输入！'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
      },
      step2Form: {
        CLT_AREA: '', // 区域
        CLT_AREA_ID: '', // 区域ID
        CLT_COMPANY_FULLNAME: '', // 企业名称
        CLT_COMPANY_ADDRESS: '', // 企业地址
        CLT_COMPANY_PHONE: '', // 企业电话
        CLT_COMPANY_CODE: '', // 企业代码
        CLT_COMPANY_LEGAL_PERSON_NAME: '', // 法人身份证姓名
        CLT_COMPANY_LEGAL_PERSON_ID: '', // 法人身份证号码
        CLT_COMPANY_LEGAL_PERSON_PHONE: '', // 法人电话
        CLT_COMPANY_REGISTER_CODE: '', // 营业执照注册号
        fltBank: '', // 开户行
        fltAccount: '', // 银行账户
        fltBankCode: '', // 开户行代码
        fltBranchName: '', // 支行名称
        fltBranchCode: '', // 支行代码
        fltContact: '', //联系人
        fltContactPhone: '', //联系人电话
      },
      step2Rules: {
        // CLT_AREA: [
        //   { required: true, message: '请选择区域', trigger: 'change' },
        // ],
        // 支行代码
        fltBranchCode: [{ required: true, message: '请输入支行代码', tigger: 'blur' }],
        // 支行名称
        fltBranchName: [{ required: true, message: '请输入支行名称', tigger: 'blur' }],
        // 开户行代码
        fltBankCode: [{ required: true, message: '请输入开户行代码', tigger: 'blur' }],
        // 开户行
        fltContact: [{ required: true, message: '请输入联系人！', trigger: 'blur' }],
        fltContactPhone: [{ required: true, message: '请输入联系人电话！', trigger: 'blur' }],
        fltBank: [{ required: true, message: '请输入开户行！', trigger: 'blur' }],
        // 银行账户
        fltAccount: [{ required: true, message: '请输入银行账户！', trigger: 'blur' }],
        // 企业名称
        CLT_COMPANY_FULLNAME: [{ required: true, message: ' ', trigger: 'blur' }],
        // 企业地址
        CLT_COMPANY_ADDRESS: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
        // 企业电话
        CLT_COMPANY_PHONE: [
          { required: true, message: '请输入企业电话', trigger: 'blur' },
          // {
          //   validator: (rule, value, callback) => {
          //     if (/^\d+$/.test(value)) {
          //       callback()
          //     } else {
          //       callback(new Error('请输入正确的企业电话'))
          //     }
          //   },
          //   trigger: 'blur'
          // }
        ],
        // 企业代码
        CLT_COMPANY_CODE: [{ required: true, message: '请输入企业简称代码', trigger: 'blur' }],
        // 法人身份证姓名
        CLT_COMPANY_LEGAL_PERSON_NAME: [{ required: true, message: '请输入法人身份证姓名', trigger: 'blur' }],
        // 法人身份证号码
        CLT_COMPANY_LEGAL_PERSON_ID: [
          { required: true, message: '请输入法人身份证号码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^\d{17}(\d|X)$/.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的法人身份证号码'))
              }
            },
            trigger: 'blur',
          },
        ],
        CLT_COMPANY_LEGAL_PERSON_PHONE: [
          { required: true, message: '请输入法人电话', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^\d+$/.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的法人电话'))
              }
            },
            trigger: 'blur',
          },
        ], // 法人电话
        CLT_COMPANY_REGISTER_CODE: [
          { required: true, message: ' ', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.length !== 15 && value.length !== 18) {
                callback(new Error(' '))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ], // 营业执照注册号
      },
      imageUrl: {
        one: '', // 营业执照图片 url
        two: '', // 法人身份证正面 url
        three: '', // 法人身份证反面 url
      },
      size: 5, // 图片限制大小 单位为 M
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted() {
    GetDepartment().then(res => {
      this.area = res.data
    })
  },
  computed: {
    // 上传预览图片 由于后台返回的地址是相对地址 需要转换为绝对地址
    imgUrl() {
      return {
        one: api.IMAGE_PREFIX + this.imageUrl.one,
        two: api.IMAGE_PREFIX + this.imageUrl.two,
        three: api.IMAGE_PREFIX + this.imageUrl.three,
      }
    },
  },
  methods: {
    handleNodeClick(data) {
      this.step2Form.CLT_AREA = data.Name
      this.step2Form.CLT_AREA_ID = String(data.Id)
    },
    loginKeyDown(event) {
      var _that = this
      //是否输入过字母键，且判断是否按键为caps lock
      if (_that.firstTochar) {
        if (event.keyCode === 20) {
          _that.bigChar = !_that.bigChar
          return
        }
      }
      //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
      var e = event || window.event
      var keyvalue = e.keyCode ? e.keyCode : e.which
      var shifKey = e.shiftKey ? e.shiftKey : keyvalue == 16 ? true : false
      if (typeof _that.step1Form.CLT_PASSWORD === 'undefined') {
        return
      }
      var strlen = _that.step1Form.CLT_PASSWORD.length
      var password = _that.step1Form.CLT_PASSWORD

      if (strlen) {
        var uniCode = password.charCodeAt(strlen - 1)
        if (keyvalue >= 65 && keyvalue <= 90) {
          //如果是字母键
          _that.firstTochar = true
          if ((uniCode >= 65 && uniCode <= 90 && !shifKey) || (uniCode >= 97 && uniCode <= 122 && shifKey)) {
            _that.bigChar = true
          } else {
            _that.bigChar = false
          }
        }
      }
    },
    loginKeyDown1(event) {
      var _that = this
      //是否输入过字母键，且判断是否按键为caps lock
      if (_that.firstTochar) {
        if (event.keyCode === 20) {
          _that.bigChar = !_that.bigChar
          return
        }
      }
      //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
      var e = event || window.event
      var keyvalue = e.keyCode ? e.keyCode : e.which
      var shifKey = e.shiftKey ? e.shiftKey : keyvalue == 16 ? true : false
      if (typeof _that.step1Form.CLT_PASSWORD_TWICE === 'undefined') {
        return
      }
      var strlen = _that.step1Form.CLT_PASSWORD_TWICE.length
      var password = _that.step1Form.CLT_PASSWORD_TWICE

      if (strlen) {
        var uniCode = password.charCodeAt(strlen - 1)
        if (keyvalue >= 65 && keyvalue <= 90) {
          //如果是字母键
          _that.firstTochar = true
          if ((uniCode >= 65 && uniCode <= 90 && !shifKey) || (uniCode >= 97 && uniCode <= 122 && shifKey)) {
            _that.bigChar = true
          } else {
            _that.bigChar = false
          }
        }
      }
    },
    // 获取验证码
    getVerifyCode() {
      if (!this.step1Form.CLT_PHONE) {
        this.$alert('请输入手机号', '系统提示', {
          type: 'warning',
        })
        return
      }
      if (!/^\d{11}$/.test(this.step1Form.CLT_PHONE)) {
        return
      }
      this.showGetVerifyCode = false
      InsertCode({
        dvrCtctel: this.step1Form.CLT_PHONE,
      }).then(_ => {
        this.$message({
          message: '验证码已发送，请注意接收',
          showClose: true,
          type: 'success',
        })
      })
      this.resetVerifyCode()
    },
    // 刷新验证码
    resetVerifyCode() {
      this.resetVerifyCodeTime = 60
      let time = () => {
        setTimeout(() => {
          this.resetVerifyCodeTime--
          if (this.resetVerifyCodeTime > 0) {
            time()
          } else {
            this.showGetVerifyCode = true
          }
        }, 1000)
      }
      time()
    },
    // 图片上传之前的检查
    beforeUpload(file) {
      if (file.type.indexOf('image') === -1) {
        this.$message.error({
          message: '请上传正确的图片类型',
          showClose: true,
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.size) {
        this.$message.warning({
          message: '建议文件大小在 ' + this.size + ' M以内',
          showClose: true,
        })
        return false
      }
    },
    // 上传图片
    uploadImage({ data, file }) {
      UploadFile({ file }).then(res => {
        // 预览图片
        this.imageUrl[data.step] = res.data
        console.log(this.imageUrl)
        //  this.imageUrl[data.step] = URL.createObjectURL(file)
      })
    },
    //上一步
    nextStepA() {
      this.step = 1
    },
    // 下一步
    nextStep(step) {
      switch (step) {
        case 2:
          // 验证基本信息 通过则进入第二步
          this.validateStep1()
          break
        case 3:
          // 验证第二步信息 通过则注册成功
          this.validateStep2()
          break
      }
    },
    // 第一步的验证
    validateStep1() {
      this.$refs.step1form.validate(validate => {
        if (validate) {
          // 验证用户名、手机号是否已被使用
          ValidNameAndPhone({
            Phone: this.step1Form.CLT_PHONE,
            Name: this.step1Form.CLT_CODE,
            Code: this.step1Form.CLT_PHONE_VALIDATE,
          }).then(() => {
            this.step = 2
          })
        }
      })
    },
    // 第二步的验证
    validateStep2() {
      this.$refs.step2form.validate(validate => {
        if (validate) {
          if (!this.imageUrl.one) {
            this.showError('请上传营业执照')
            return
          }

          if (!this.imageUrl.two) {
            this.showError('请上传法人身份证正面')
            return
          }

          if (!this.imageUrl.three) {
            this.showError('请上传法人身份证反面')
            return
          }

          Register({
            // DPT_ID:this.step2Form.CLT_AREA,
            // CLT_DEP_ID: this.step2Form.CLT_AREA_ID,
            CLT_DEP_ID: this.step2Form.CLT_AREA,
            CLT_PASSWORD: this.step1Form.CLT_PASSWORD,
            CLT_PHONE: this.step1Form.CLT_PHONE,
            CLT_EMAIL: this.step1Form.CLT_EMAIL,
            CLT_FLTCODE: this.step2Form.CLT_COMPANY_CODE,
            CLT_FLTNAME: this.step2Form.CLT_COMPANY_FULLNAME,
            CLT_TAXNO: this.step2Form.CLT_COMPANY_REGISTER_CODE,
            CLT_FLTCTCTEL: this.step2Form.CLT_COMPANY_PHONE,
            CLT_FLTADDRESS: this.step2Form.CLT_COMPANY_ADDRESS,
            CLT_LEGALNAME: this.step2Form.CLT_COMPANY_LEGAL_PERSON_NAME,
            CLT_LEGALID: this.step2Form.CLT_COMPANY_LEGAL_PERSON_ID,
            CLT_LEGALPHONE: this.step2Form.CLT_COMPANY_LEGAL_PERSON_PHONE,
            CLT_CODE: this.step1Form.CLT_CODE,
            CLT_TAXNOIMAGE: this.imgUrl.one,
            CLT_LEGALIMAGEP: this.imgUrl.two,
            CLT_LEGALIMAGEB: this.imgUrl.three,
            fltBank: this.step2Form.fltBank,
            fltAccount: this.step2Form.fltAccount,
            fltContact: this.step2Form.fltContact,
            fltContactPhone: this.step2Form.fltContactPhone,
            fltBankCode: this.step2Form.fltBankCode,
            fltBranchName: this.step2Form.fltBranchName,
            fltBranchCode: this.step2Form.fltBranchCode,
          }).then(() => {
            this.step = 3
            this.timer = setInterval(() => {
              if (this.seconds === 1) {
                this.$router.push('/login')
              }
              this.seconds--
            }, 1000)
          })
        }
      })
    },
    // 错误提示
    showError(message) {
      this.$message({
        type: 'error',
        message: message,
        showClose: true,
      })
    },
  },
}
</script>

<style lang="scss">
.my-popover {
  height: 200px;
  overflow-y: auto;
}
</style>

<style lang="scss" scoped>
.box {
  .left {
    display: inline-block;
    margin-left: 153px;
  }
  .right {
    display: inline-block;
    margin-left: 33px;
  }
}
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  .register {
    height: 100%;
    box-sizing: border-box;
    padding: 30px 0;
    background-color: #eaeaea;
    // flex: 1 0 auto;
  }
  .step2-register {
    height: auto;
    box-sizing: border-box;
    padding: 30px 0;
    background-color: #eaeaea;
  }
  // .footer{
  //    flex: 0 0 auto;
  // }
}
.elTag {
  position: absolute;
  right: -110px;
  top: 0;
}

.inner {
  width: 900px;
  min-height: 100%;
  background-color: #fff;
  margin: 0 auto;
}
.title {
  font-size: 32px;
  padding: 30px 0 30px 30px;
}
.steps {
  display: flex;
  margin-left: -10px;
}
.step {
  width: 261px;
  height: 46px;
  position: relative;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.step-text {
  font-size: 16px;
  z-index: 1;
  color: #888;
  &.active {
    color: #fff;
  }
}
.must {
  color: #f56c6c;
  margin: 0 4px;
}
.attention {
  width: 90%;
  margin: 0 auto;
  font-size: 16px;
  padding: 15px 0;
}
.re-form {
  width: 90%;
  height: 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  &.active {
    height: auto;
    padding: 15px 0;
  }
}
.form {
  width: 60%;
  height: auto;
}
.btn {
  width: 150px;
  margin: 0 auto;
  display: block;
}
.msg {
  margin-top: 2px;
  display: block;
  color: #999;
  font-size: 12px;
  line-height: initial;
}

.upload-area {
  position: absolute;
  width: 30%;
  top: 0;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}
.step2-upload {
  width: 150px;
  height: 100px;
  background-color: #efefef;
  margin-top: 10px;
}
.upload-desc {
  text-align: center;
  // color: #F56C6C;
  font-size: 12px;
  margin-top: 2px;
}

.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  position: relative;
  &::after {
    content: '上传';
    position: absolute;
    font-size: 14px;
    color: #8c939d;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    line-height: 40px;
  }
}

.avatar {
  width: 150px;
  height: 100px;
}

.success {
  width: 100%;
  padding-top: 60px;
  text-align: center;
}
.success-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 40px;
}
.success-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}
.success-timer {
  color: #999;
  font-size: 12px;
  margin-bottom: 60px;
}
</style>
